<template>
	<div class="container">
		<!-- 头部导航 -->
		<div class="index_top">
			<div class="into_index">首页<i class="el-icon-close"></i></div>
			<div class="current">{{text}}<i class="el-icon-close"></i></div>
		</div>
		<div class="title-receiving">
			<div>
				<span>产品包列表</span>/<span class="detail">{{text}}</span>
			</div>
			<el-button type="success" @click="handerBase">返回</el-button>
		</div>
		<div class="container-box">
			<div class="el-menu">
				<el-menu :default-active="activeIndex" class="el-menu-demo" mode="horizontal" @select="handleSelect">
					<el-menu-item index="1">产品包信息</el-menu-item>
					<el-menu-item index="2">应用详情</el-menu-item>
					<el-menu-item index="3">关联商品</el-menu-item>
				</el-menu>
			</div>
			<div class="house-detail" v-if="current==1">
				<el-form ref="form" :model="form" label-width="80px">
					<el-form-item label="名称" :required="true">
						<el-input v-model="productList.name"></el-input>
					</el-form-item>
					<el-form-item label="标签" :required="true">
						<el-input v-model="productList.title"></el-input>
					</el-form-item>
					<el-form-item label="销售价" :required="true">
						<el-input v-model="productList.price"></el-input>
					</el-form-item>
					<el-form-item label="原价" :required="true">
						<el-input v-model="productList.primary_price"></el-input>
					</el-form-item>
					<!-- <div class="form-tel">
						<el-form-item label="面积">
							<div class="area-input">
								<el-input type="text" v-model="form.area_scope" placeholder="请输入面积范围，例如：100-120">
								</el-input>
								<span class="area-span">m²</span>
								<el-input type="text" v-model="form.price" placeholder="请输入价格" class="price"></el-input>
								<span class="area-span">元</span>
							</div>
						</el-form-item>
						<el-button type="primary" class="add-btn" @click="addData">添加</el-button>
					</div> -->
					<!-- <div class="form-tel">
						<div class="tel-input">
							<el-form-item label="" label-width="50px">
								<div class="add-items">
									<div v-for="(item, index) in list" :key="index" class="add-item">
										<div>
											{{ item.area_scope + "m²" }} ; {{ item.price }}元
										</div>
										<i class="el-icon-error" @click="handleDel(index)"></i>
									</div>
								</div>
							</el-form-item>
						</div>
					</div> -->
					<div class="avatar-input">
						<div class="picture-card">
							<el-form-item label="封面图片" label-width="80px" :required="true">
								<el-upload class="avatar-uploader" :action="uploadUrl" list-type="picture-card"
									:file-list="fileList" :on-preview="handlePictureCardPreview" ref="upload"
									:on-remove="handleRemove" :on-success="handleAvatarSuccess"
									:on-change="uploadChange" :before-upload="beforeAvatarUpload">
									<i class="el-icon-plus"></i>
								</el-upload>
								<p style="color:#a0a0a0;padding:2px 0 0 0; margin-top: -5px;">
									（图片大小不超过2M，尺寸建议宽度为640，并保持图片大小一致）</p>
								<el-dialog :visible.sync="dialogVisible">
									<img width="100%" :src="dialogImageUrls" alt="">
								</el-dialog>
							</el-form-item>
						</div>
					</div>
					<el-form-item label="是否推荐" label-width="80px">
						<el-radio-group v-model="recommend" @change="handleRecommend">
							<el-radio label="1">是</el-radio>
							<el-radio label="0">否</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="定金付款" label-width="80px">
						<el-radio v-model="set_deposit_status" label="0">否</el-radio>
						<el-radio v-model="set_deposit_status" label="1">是</el-radio>
					</el-form-item>
					<div class="item-input">
						<el-form-item label="定金比率" label-width="80px" v-if="set_deposit_status == '1'">
							<div class="shelves">
								<div class="right" style="display: flex">
									<el-input type="number" v-model="deposit_rate" @blur="setDeposit"></el-input>
								</div>
								<div>% <span style="color: #bbb">（1-100之间）</span></div>
							</div>
						</el-form-item>
					</div>
					<el-form-item label="分佣比率" label-width="80px">
						<div class="shelves">
							<div class="right" style="display: flex">
								<el-input type="number" v-model="promotor_rate"></el-input>
							</div>
							<div>% <span style="color: #bbb">（0-15之间）</span></div>
						</div>
					</el-form-item>
				</el-form>
				<div class="newShop_tabs_content_btn">
					<button class="save" @click="save(2)">下一步</button>
				</div>
			</div>
			<!-- 产品包应用场景 -->
			<div class="house-detail" v-if="current==2">
				<el-form ref="form" :model="form" label-position="left">
					<div class="form-tel">
						<el-form-item label="标题" label-width="80px" :required="true">
							<el-input type="text" v-model="sceneList.title"></el-input>
						</el-form-item>
					</div>
					<div class="form-tel">
						<el-form-item label="面积" label-width="80px" :required="true">
							<div class="area-input">
								<el-input type="text" v-model="sceneList.area"></el-input>
								<span class="money">m²</span>
							</div>
						</el-form-item>
						<div class="service">
							<el-form-item label="风格" label-width="80px" :required="true">
								<el-select v-model="houseTypeList" @change="handlehouseType" popper-class="el-select"
									placeholder="请选择">
									<el-option v-for="item in houseTypeTagList"
									           :key="item.id"
									           :label="item.name"
									           :value="item.id">
									</el-option>
								</el-select>
							</el-form-item>
						</div>
					</div>
					<div class="tel-input">
						<el-form-item label="户型" label-width="80px" :required="true">
							<el-select v-model="house_room" popper-class="el-select"
								style="width:150px;margin-right:10px;" placeholder="请选择室数">
								<el-option v-for="item in house_room_list" :key="item.value" :label="item.name"
									:value="item.value">
								</el-option>
							</el-select>
							<el-select v-model="house_office" popper-class="el-select" style="width:150px"
								placeholder="请选择厅数">
								<el-option v-for="item in house_office_list" :key="item.value" :label="item.name"
									:value="item.value">
								</el-option>
							</el-select>

						</el-form-item>
					</div>
					<div class="tel-input">
						<el-form-item label="轮播图" label-width="80px" :required="true">
							<div class="picture-card">
								<el-upload class="avatar-uploader" action="/api/admin/base/uploadfile"
									list-type="picture-card" :on-preview="handlePictureCardPreview2"
									:on-success="handleImageSuccess" :file-list="bannerList"
									:before-upload="beforeImageUpload" :on-remove="handleRemove2">
									<i class="el-icon-plus"></i>
								</el-upload>
							</div>

							<el-dialog :visible.sync="dialogVisibles">
								<img width="100%" :src="dialogImageUrl" alt="" />
							</el-dialog>
						</el-form-item>
					</div>
					<div style="width: 900px; height: 500px;">
						<el-form-item label="详情" label-width="80px" :required="true">
							<!--上传图片时得加载画面-->
							<VueEditor style="width: 100%" v-loading="editorLoading" element-loading-text="图片上传中"
								element-loading-background="rgba(0, 0, 0, 0.5)" useCustomImageHandler
								@image-added="handleImageAdded" :editorToolbar="customToolbar"
								v-model="sceneList.content" />

						</el-form-item>
					</div>
				</el-form>
				<div class="newShop_tabs_content_btn">
					<button class="bast" @click="save(1)">上一步</button>
					<button class="save" @click="save(3)">下一步</button>
				</div>
			</div>
			<div class="house-detail" v-if="current==3">
				<el-button type="primary" @click="handleAddProduct">添加商品</el-button>
				<div class="down-menu" v-if="shopList.length">
					<div v-for="(itemX, indexX) in shopList" :key="indexX">
						<h6 @click="handleContentShow(indexX)">
							<i class="el-icon-arrow-down"></i>{{ itemX.cate_name }}
						</h6>
						<div v-for="(item,index) in itemX.list" :key="index">
							<div v-if="itemX.isShow">
								<div class="menu-bg">
									<div class="menu-line">
										<div class="menu-content">
											<div><span>{{index+1}}、</span>{{ item.product_title }}</div>
											<div>
												<i @click="handleProductDel(index,indexX,item,1)"
													class="el-icon-delete-solid"></i>
											</div>
										</div>
										<p>品牌：{{ item.store_name }}</p>
										<p>价格：{{ item.price }}</p>
										<p>原价：{{ item.primary_price }}</p>
										<div class="menu-type">
											<span>可选规格
												<i @click="handleSelectable(item, index,indexX,1)"
													class="el-icon-circle-plus-outline"></i></span>
											<div v-if="item.selectData.length" style="display:flex;">
												<span class="specification" v-for="(data, keys) in item.selectData":key="keys">
													<span v-for="(child, ind) in data.arr" :key="ind">
														{{child.specif}}
													</span>
													{{ data.num }}件
													<i class="el-icon-error"
														@click="deleteGuige1(indexX,index,keys,1)"></i>
												</span>
											</div>
										</div>
										<div class="menu-type default">
											<span>默认规格
												<i @click="handleDefault(item,index,indexX,1)" class="el-icon-edit"></i>
											</span>
											<div v-if="item.selectData.length" class="df-specification">
												<div v-for="(imt, iet) in item.selectData" :key="iet"
													v-if="imt.checked==1">
													<span class="specification">
														<span v-for="(v,i) in imt.arr" :key="i">{{v.specif}}</span>
														{{imt.num}}件
													</span>
												</div>
											</div>
											<div v-if="item.selectData.length==0" class="df-specification">
												请添加规格
											</div>
										</div>
									</div>
								</div>
								<div class="menu-bg">
									<div class="menu-line" v-for="(data, keys) in item.productSecondList" :key="keys">
										<div class="menu-content">
											<div>({{ keys + 1 }}){{ data.product_title }}</div>
											<div @click="handleDelItem(indexX,index, keys)">
												<i class="el-icon-delete-solid"></i>
											</div>
										</div>
										<p>品牌：{{ data.store_name }}</p>
										<div class="menu-type">
											<span>可选规格
												<i @click="handleSelectable(data, index,indexX,2, keys)"
													class="el-icon-circle-plus-outline"></i></span>
											<div v-if="data.selectData.length" style="display:flex;">
												<span class="specification" v-for="(data, keys1) in data.selectData"
													:key="keys1">
													<span v-for="(child, ind) in data.arr" :key="ind">
														{{child.specif}}
													</span>
													{{ data.num }}件
													<i class="el-icon-error"
														@click="deleteGuige1(indexX,index,keys,2,keys1)"></i>
												</span>
											</div>

										</div>
										<div class="menu-type default">
											<span>默认规格：
												<i @click="handleDefault(data,index,indexX,2,keys)"
													class="el-icon-edit"></i>
											</span>
											<div v-if="data.selectData.length" class="df-specification">
												<div v-for="(imt, iet) in data.selectData" :key="iet"
													v-if="imt.checked==1">
													<span class="specification">
														<span v-for="(v, i) in imt.arr" :key="i">{{ v.specif }}</span>
														{{ imt.num }}件
													</span>
												</div>

											</div>
											<div v-else class="df-specification">
												请添加规格
											</div>
										</div>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>
				<div class="primary-btn">
					<div class="el-buttons">
						<el-button type="primary" @click="handleNewAdd">立即{{text}}</el-button>
					</div>
				</div>
				<el-dialog title="添加商品可选规格" :visible.sync="dialogFormVisible">
					<div class="product-specification">
						<div v-for="(item, index) in parameter" :key="index">
							<div>
								<div class="product-color">可选{{ item.specifs }}：</div>
								<el-button class="specification" @click="selectSpecifs(keys, index)"
									v-for="(data, keys) in item.child" :class="{'active':data.selected==true}"
									:key="keys">{{ data.specif }}</el-button>
							</div>
						</div>

						<div>
							<div class="mt">数量：</div>
							<span class="minus" @click="handleMinus">-</span>
							<input type="text" class="num active" v-model="num" />
							<span class="add" @click="handleAdd">+</span>
						</div>
					</div>
					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogFormVisible = false">取 消</el-button>
						<el-button type="primary" @click="handleDialogSure">确 定</el-button>
					</div>
				</el-dialog>
				<el-dialog title="添加商品默认规格"
				           :visible.sync="dialogFormVisible2">
				  <div class="product-specification">
				    <div v-for="(item, index) in defaultList"
				         :key="index">
				      <div class="default-specification" @click="handleSelectDefault(item,index)">
				        <span  v-for="(data, keys) in item.arr"
				          :key="keys">{{ data.specif }}
				          </span><span>{{item.num}}件</span>
				      </div> 
				    </div>
				  </div>
				  <div slot="footer"
				       class="dialog-footer">
				    <el-button @click="dialogFormVisible2 = false">取 消</el-button>
				    <el-button type="primary"
				               @click="handleDialogSure2">确 定</el-button>
				  </div>
				</el-dialog>
				<el-dialog title="请搜索需要添加的商品" :visible.sync="dialogFormVisible3">
					<div class="seach">
						<el-input v-model="search" placeholder="请输入商品信息查询"></el-input>
						<button class="button" @click="getProductMatch">
							<i class="el-icon-search"></i>搜索
						</button>
					</div>
					<div class="border-bt" v-if="goodsList.length">
						<!-- <el-checkbox-group v-model="checkList">
							<div class="goods-list" v-for="(item, index) in goodsList" :key="index">
								<el-checkbox :label="item.product_id"
									@change="handleProduct(item.cate_id,item.cate_name,item.product_id,index,item)"
									:checked="item.checked">
									<img :src="item.main_imgurl" alt="" class="logo-img" />
									<span class="content">{{ item.checked }}</span>
								</el-checkbox>
							</div>
								</el-checkbox>
						</el-checkbox-group> -->
						<div class="goods-list" v-for="(item, index) in goodsList" :key="index" @click="handleProduct(item.cate_id,item.cate_name,item.product_id,index,item)">
							<input type="checkbox"
								:checked="item.checked">
								<img :src="item.main_imgurl" alt="" class="logo-img" />
								<span class="content">{{ item.product_title }}
								<span>￥{{ item.price }}</span>
								</span>
						</div>
						<p @click="openMore">{{moreTxt}}</p>
					</div>

					<div slot="footer" class="dialog-footer">
						<el-button @click="dialogFormVisible3 = false">取 消</el-button>
						<el-button type="primary" @click="handleProductSure">确 定</el-button>
					</div>
				</el-dialog>
			</div>
		</div>
	</div>
</template>

<script>
	import {
		VueEditor
	} from "vue2-editor";
	import unil from "../../../uitls/util";
	export default {
		components: {
			VueEditor
		},

		data() {
			return {
				id:'',//产品包id
				text: '新增',
				activeIndex: '1',
				current: 1,
				uploadUrl: '/api/admin/base/uploadfile',
				form: {
					name: '',
					title: '',
					area_scope: '',
					price: '',
				},
				dialogImageUrl: "",
				dialogVisible: false,
				dialogImageUrls: "",
				dialogVisibles: false,
				imageUrl:'',
				imageUrlId: "", //封面图片id
				fileList: [], //封面图
				bannerList: [], //轮播图
				thumb_url_id: '', //轮播图id
				recommend:'0', //是否推荐
				set_deposit_status: '0', //是否定金付款
				deposit_rate: 10, //定金比率
				sceneList: {
					thumb_url: []
				}, //应用场景
				houseTypeList: '', //户型选中
				houseTypeTagList: [], //户型标签
				 productList: {}, //产品包信息
				house_room_list: [{
						name: "一室",
						value: 1,
					},
					{
						name: "两室",
						value: 2,
					},
					{
						name: "三室",
						value: 3,
					},
					{
						name: "四室",
						value: 4,
					},
					{
						name: "五室",
						value: 5,
					},
					{
						name: "六室",
						value: 6,
					},
					{
						name: "七室",
						value: 7,
					},
					{
						name: "八室",
						value: 8,
					},
					{
						name: "九室",
						value: 9,
					},
				],
				house_room: '', //室数
				house_office: '', //厅数
				house_office_list: [{
					name: '一厅',
					value: 1
				}, {
					name: '两厅',
					value: 2
				}, {
					name: '三厅',
					value: 3
				}, {
					name: '四厅',
					value: 4
				}, {
					name: '五厅',
					value: 5
				}, {
					name: '六厅',
					value: 6
				}, {
					name: '七厅',
					value: 7
				}, {
					name: '八厅',
					value: 8
				}, {
					name: '九厅',
					value: 9
				}, ],
				editorLoading: false, //富文本图片loading
				customToolbar: [
					[{
						header: [false, 1, 2, 3, 4, 5, 6]
					}], //标题
					['bold', 'italic', 'underline'], //加粗\斜体\下划线
					['italic'], //斜体----也可以拆开来写，用于换位置顺序
					[{
						align: ''
					}, {
						align: 'center'
					}, {
						align: 'right'
					}], //对齐
					[{
						list: 'ordered'
					}, {
						list: 'bullet'
					}, {
						list: 'check'
					}], //有序无序列表
					[{
						background: []
					}, {
						color: []
					}], //背景色
					['image', 'link'], //图片、链接
					['strike'], //作废（文字中间一横）
					['underline'],
					['clean'], //清楚格式（所谓去掉背景色这些花里胡巧）
					['code'], //代码
					['code-block'], //代码块
					//['video'] //视频
				],
				dialogFormVisible: false, //规格弹框
				dialogFormVisible2: false, //默认规格弹框
				dialogFormVisible3: false, //搜索弹框
				selectType: 1,
				shopList: [], //商品列表
				parameter: [],
				num: 1, //规格数量
				search: '', //商品匹配
				goodsList: [], //关联商品
				moreTxt: '点击加载更多',
				pagesize: 20,
				pitchProductList: [], //选中商品数据,
				checkList: [],
				radio2: '',
				sku_id: '',
				list: [],
				productData: {}, //规格总数据
				 productIndex:null,
				defaultList: [], //默认规格的数据
				promotor_rate:0,//分佣比率
			}
		},
		mounted() {
			this.id = this.$route.query.id
			if(this.id){
			  this.text = '修改'
			}
            this.getProductList()
			this.getHouseTypeList()
		},
		computed:{
			/**
			 * 获取可选规格
			 */
			selectParameter() {
			  let arr = []
			  this.parameter.forEach((data) => {
			    data.child.forEach((item) => {
			      let newObj = {}
			
			      if (item.selected) {
			        if (!newObj.specif && newObj.specif !== item.specif) {
			          newObj = item
			          arr.push(item)
			        }
			      }
			    })
			  })
			  return { arr: arr }
			},
		},
		methods: {
			handerBase() {
				this.$router.go(-1);
			},
			//获取户型标签
			getHouseTypeList() {
			  this.$http.post('/api/admin/newpk/ProductPack/getStyle').then((res) => {
			    // console.log(this.houseTypeId, 'fenggebiaoqian---')
			
			    this.houseTypeTagList = res.data.design_style
			    const result = this.houseTypeTagList.filter(
			      (item) => item.id == this.houseTypeId
			    )
			    if (result.length) {
			      this.houseTypeList = result[0].name
			    }
			    console.log(result, 989898)
			  })
			},
			//添加商品
			handleAddProduct() {
				this.selectType = 1
				this.dialogFormVisible3 = true
			},
			handleContentShow(index) {
				this.shopList[index].isShow = !this.shopList[index].isShow
				// this.pitchProductSecond = []
			},
			// 商品匹配列表加载更多
			openMore() {
				this.page++
				let params = {
					keyword: this.search,
					page: this.page,
					pagesize: this.pagesize
				}
				this.$http.post('/api/admin/newpk/ProductPack/product', params).then((res) => {
					console.log(res.data.data, 'shangp-------')
					if (res.code == 1) {
						if (!res.data.data.length) {
							this.moreTxt = '没有更多了~'
							return
						}
						res.data.data.map(item => item.checked = false)
						this.goodsList = this.goodsList.concat(res.data.data)
					}
				})
			},
			//可选规格
			handleSelectable(item, index,indexX,type, keys) {
			  this.optionType=type
			  this.sku_id = ''
			  this.shopListIndex = indexX
			  this.selectIndex = index
			  this.selectKeys = keys
			  let { product_id } = item
			  let params = {
			    product_id,
			  }
			  this.$http
			    .post('/api/admin/newpk/ProductPack/productDetail', params)
			    .then((res) => {
			      console.log(res, '规格')
			      this.productData = res.data
			      let list = res.data.parameter
			      console.log(list,'listlistlist');
			      list.forEach((data) => {
			        data.child.forEach((item) => {
			          console.log(item);
			          item.selected = false
			          item.key = data.specifs
			        })
			      })
			      this.parameter = JSON.parse(JSON.stringify(list))
			      console.log(this.parameter);
			       this.dialogFormVisible = true
			    })
			  // console.log("item", item, "index", index, "keys", keys)
			},
			//可选规格确定
			handleDialogSure() {
			  this.dialogFormVisible = false
			  let { selectIndex,shopListIndex,selectKeys } = this
			  console.log(selectIndex,shopListIndex ,selectKeys,8899)
			  // return;
			  console.log(this.productData.parameter);
			  this.get_keys()
			  console.log(this.shopList[shopListIndex].list[selectIndex],"shuju--88");
			  // console.log();
			  if(this.optionType==1){
			    let nowSpec = this.shopList[shopListIndex].list[selectIndex].selectData
			    console.log(nowSpec,'nowSpec');
			    let selectSpec = []
			    nowSpec.map(item=>{
			      let selectSpec1 = []
			      item.arr.map(item1=>{
			        selectSpec1.push({
			          key:item1.key,
			          value:item1.specif
			        })
			      })
			      selectSpec.push(selectSpec1)
			    })
			    console.log(selectSpec,'主商品中的可选规格');
			    // let nowSku = nowSpec.findIndex(item=>item.sku_id==this.sku_id)
			    let nowSku = selectSpec.findIndex(item=>JSON.stringify(item)==JSON.stringify(this.speckeys))
			    if(nowSku!=-1){
			      this.$message.warning('规格重复')
			      return
			    }
			  }else{
			     let nowSpec2 = this.shopList[shopListIndex].list[selectIndex].productSecondList[selectKeys].selectData
			    console.log(nowSpec2,'nowSpec2');
			    let selectSpec2 = []
			    nowSpec2.map(item=>{
			      let selectSpec3 = []
			      item.arr.map(item1=>{
			        selectSpec3.push({
			          key:item1.key,
			          value:item1.specif
			        })
			      })
			      selectSpec2.push(selectSpec3)
			    })
			    console.log(selectSpec2,'替换中的可选规格');
			    let nowSku2 = selectSpec2.findIndex(item=>JSON.stringify(item)==JSON.stringify(this.speckeys))
			    if(nowSku2!=-1){
			      this.$message.warning('规格重复')
			      return
			    }
			  }
			  console.log(this.selectParameter,'next');
			  console.log(this.sku_id);
			  this.selectParameter.sku_id=this.sku_id
			  this.selectParameter.num=this.num
			  this.selectParameter.checked=0
			  console.log(this.parameter.length,'next');
			
			  if(this.selectParameter.arr.length<this.parameter.length){
			    this.$message.warning('请选择规格')
			    return
			  }
			  // if()
			  // Object.values(this.selectParameter).forEach((data, index) => {
			  //   data.num = this.num
			  //   data.sku_id = this.sku_id //规格id
			  //   data.checked=1
			  // })
			  if (selectIndex !== undefined && selectKeys === undefined) {
			    this.shopList[shopListIndex].list[selectIndex].selectData =  this.shopList[shopListIndex].list[selectIndex].selectData.concat(this.selectParameter)
			  }
			  if (selectIndex !== undefined && selectKeys !== undefined) {
			    this.shopList[shopListIndex].list[selectIndex].productSecondList[
			      selectKeys
			    ].selectData = this.shopList[shopListIndex].list[selectIndex].productSecondList[
			      selectKeys
			    ].selectData.concat(this.selectParameter)
			  }
			  // this.defaultList = this.pitchProductList[selectIndex].selectData
			  // console.log(this.pitchProductList[selectIndex].selectData);
			  // console.log(this.defaultList,"默认规格数据");
			  console.log(this.shopList,"规格----");
			},
			get_keys() {
			  // console.log();
			  let keys = []
			  console.log(this.productData.parameter);
			  // let newParameter = JSON.parse(JSON.stringify(this.productData.parameter))
			  // console.log(this.productData.parameter);
			  this.parameter.map((item1, index1) => {
			    console.log(item1,"meiyixiang");
			    let checkedItem = item1.child.find((r) => r.selected)
			    // console.log(checkedItem,"checkedItem");
			    if (checkedItem) {
			      keys.push({
			        key: item1.specifs,
			        value: checkedItem.specif,
			      })
			    }
			  })
			  console.log(keys, 44444)
			  this.speckeys = keys
			  let sku_lst = this.productData.sku_lst
			  for (let i = 0; i < sku_lst.length; i++) {
			    if (JSON.stringify(sku_lst[i].attribute) == JSON.stringify(keys)) {
			      console.log(sku_lst[i]);
			      this.sku_id = sku_lst[i].sku_id
			      this.price = sku_lst[i].price
			      this.sku_primary_price = sku_lst[i].primary_price
			      this.sku_num = sku_lst[i].num
			      return
			    }else{
			      this.sku_id = sku_lst[0].sku_id
			      this.price = sku_lst[0].price
			      this.sku_primary_price = sku_lst[0].primary_price
			      this.sku_num = sku_lst[0].num
			    }
			  }
			},
			handleSelectDefault(data,index){
			  console.log(data,index);
			  this.checkIndex = index
			  if(this.defaultType==1){
			    for(let i = 0;i<this.shopList[this.shopListIndex].list[this.selectIndex].selectData.length;i++){
			      // console.log(this.pitchProductList[this.selectIndex].selectData[index].arr);
			    //  this.$set(this.shopList[this.shopListIndex].list[this.selectIndex].selectData[i],'checked',0)
			        console.log(i);
			        console.log(index);
			      if(i==index){
			        this.$set(this.shopList[this.shopListIndex].list[this.selectIndex].selectData[i],'checked',1)
			      }else{
			         this.$set(this.shopList[this.shopListIndex].list[this.selectIndex].selectData[i],'checked',0)
			      }
			    }
			  }else{
			    for(let i = 0;i<this.shopList[this.shopListIndex].list[this.selectIndex].productSecondList[this.selectKeys].selectData.length;i++){
			      // console.log(this.pitchProductList[this.selectIndex].selectData[index].arr);
			      // this.$set(this.shopList[this.shopListIndex].list[this.selectIndex].productSecondList[this.selectKeys].selectData[i],'checked',0)
			        console.log(i);
			        console.log(index);
			      if(i==index){
			        this.$set(this.shopList[this.shopListIndex].list[this.selectIndex].productSecondList[this.selectKeys].selectData[index],'checked',1)
			      }else{
			        this.$set(this.shopList[this.shopListIndex].list[this.selectIndex].productSecondList[this.selectKeys].selectData[i],'checked',0)
			      }
			    }
			  }
			},
			//默认规格确定
			handleDialogSure2(){
			    this.num = 1
			    this.dialogFormVisible2 = false
			},
			/**
			 * 选择可选规格
			 */
			selectSpecifs(keys, index) {
			  console.log(this.parameter);
			  console.log(this.parameter,"guige88--");
			  // console.log(paraArr,'2341341351521ksdfhgks');
			  for (let i = 0; i < this.parameter[index].child.length; i++) {
			    if (keys == i) {
			      // this.parameter[index].child[i].selected = true
			      this.$set(this.parameter[index].child[i],'selected',true)
			    } else {
			      // this.parameter[index].child[i].selected = false
			      this.$set(this.parameter[index].child[i],'selected',false)
			    }
			  }
			  console.log(this.parameter,"guige99--");
			},
			//一级默认规格
			handleDefault(item,index,indexX,type,keys) {
			  console.log(item,'more数据');
			  console.log(index);
			  this.defaultType = type
			  console.log(type);
			  this.selectIndex = index
			  this.shopListIndex = indexX
			  this.selectKeys = keys
			  this.num = 1
			  this.defaultList = item.selectData
			      this.dialogFormVisible2 = true
			  //   })
			},
			//商品匹配
			getProductMatch() {
				this.moreTxt = '点击加载更多'
				this.page = 1
				let params = {
					keyword: this.search,
					page: this.page,
					pagesize: this.pagesize
				}
				this.$http.post('/api/admin/newpk/ProductPack/product', params).then((res) => {
					console.log(res, 'shangp-------')
					if (res.code == 1) {
						res.data.data.map(item => item.checked = false)
						this.goodsList = res.data.data ? res.data.data : []
						
					}
				})
			},
			//规格数量操作
			handleMinus() {
				if (this.num == 1) {
					return
				} else {
					this.num = this.num - 1
				}
			},
			handleAdd() {
				this.num += 1
			},
			//立即添加
			handleNewAdd() {
				let confirm=this.id?'是否确定修改':'是否立即新增';
				this.$confirm(confirm, '提示').then(() => {
				let product_list = []
				this.shopList.map(item => {
					console.log(item, '1111111');
					item.list.map(item1 => {
						console.log(item1);
						let obj = {
							product_data: {},
							replace_product_data: []
						}
						let obj1 = {
							id: item1.id ? item1.id : null,
							product_id: item1.product_id,
							sku_data: []
						}
						
						obj.product_data = obj1
						item1.selectData.map(item2 => {
							console.log(item2, '22222222222');
							let obj2 = {
								id: item2.id ? item2.id : null,
								sku_id: item2.id ? '' : item2.sku_id,
								num: item2.num,
								checked: item2.checked
							}
							obj1.sku_data.push(obj2)
						})
						

						if (item1.productSecondList) {
							item1.productSecondList.map(item3 => { //可替换商品
								console.log(item3, '333333333333333');
								let obj3 = {
									product_id: item3.product_id,
									sku_data: []
								}
								item3.selectData.map(item4 => {
									console.log(item4, '4444444444444444');
									let obj4 = {
										id: item4.id ? item4.id : null,
										sku_id: item4.id ? '' : item4.sku_id,
										num: item4.num,
										checked: item4.checked
									}
									obj3.sku_data.push(obj4)
								})
								obj.replace_product_data.push(obj3)
							})
						}
						console.log(obj);
						product_list.push(obj)
					})
				})

				console.log(product_list);

				let productJsonList = JSON.stringify(product_list)
				let thumb_url_id = []
				console.log('轮播图id',this.bannerList);
				this.bannerList.map(item => {
					thumb_url_id.push(item.img_id)
				})
				let params = {
					id: this.id,
					name: this.productList.name, //产品包名称
					primary_price:this.productList.primary_price,//产品包原价
					price:this.productList.price,//产品包销售价
					//area_price: this.productList.area_price, //每平方米价格
					title: this.productList.title, //产品包标签
					lead_img: this.imageUrlId, //展示图
					is_push: this.recommend, //是否推荐1是 0否
					sku_lst: JSON.stringify(this.list), //产品包sku
					// area_scope:this.form.area,//面积
					// price:this.form.price,//原价
					scene_title: this.sceneList.title, //应用场景名称
					offer: +this.sceneList.offer, //报价
					area: this.sceneList.area, //面积
					style_id: this.houseTypeList, //设计风格 传id
					// house_name: this.house_name_id, //户型名称
					house_room: this.house_room,
					house_office: this.house_office,
					content: this.sceneList.content, //应用场景介绍
					thumb_url: thumb_url_id.join(','), //应用场景轮播图多个1,2
					product_lst: productJsonList,
					set_deposit_status: this.set_deposit_status,
					deposit_rate: this.deposit_rate / 100,
					promotor_rate:this.promotor_rate,
				}
				let url = this.id ? '/api/admin/newpk/ProductPack/edit' : '/api/admin/newpk/ProductPack/add'
				console.log(url, 'urlurlrurlurl');
				console.log(params, '添加参数')
				this.$http.post(url, params).then((res) => {
					// console.log(res,"tianjia-----66");
					if (res.code == 1) {
						this.$message({
							message: this.id ? '修改成功' : '添加成功',
							type: 'success',
						})
						if (!this.id) {
							this.$router.back(1)
						}
					} else {
						this.$message({
							message: res.msg,
							type: 'warning',
						})
					}
				})
				}).catch(() => {

				});
			},
			/**
			 * 删除二级列表里面第一个商品的规格
			 */
			deleteGuige1(indexX,index,keys,type,keys1) {
			  // list,
			  console.log(keys, index)
			  if(type==1){
			    this.shopList[indexX].list[index].selectData.splice(keys, 1)
			  }else{
			    this.shopList[indexX].list[index].productSecondList[keys].selectData.splice(keys1, 1)
			  }
			  
			},
			//富文本上传图片
			handleImageAdded(file, Editor, cursorLocation, resetUploader) {
				var formData = new FormData()
				let isLtSize = file.size / 1024 / 1024 < 10
				if (!isLtSize) {
					this.$message.warning('上传文件不能超过 10MB!')
					return
				}
				this.editorLoading = true
				formData.append('file', file)
				this.$http.post('/api/admin/base/uploadfile', formData)
					.then((result) => {
						// 你上传路径返回的url
						let url = result.data.url
						Editor.insertEmbed(cursorLocation, 'image', url)
						resetUploader()
						this.editorLoading = false
					})
					.catch((err) => {
						console.log(err)
						this.editorLoading = false
					})
			},
			//获取选中的标签
			handlehouseType(e) {
				this.houseTypeList = e
			},
			handleRecommend(e) {
				this.recommend = e;
			},
			handleSelect(key) {
				this.current = key
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url
				this.dialogVisible = true;
			},
			//封面图上传
			handleAvatarSuccess(res, file) {
				let logoData = file.response.data
				this.dialogImageUrls = logoData.url
				this.fileList.push({
					url: logoData.url,
					img_id: logoData.id
				})
				// this.fileList = fileList
				// this.dialogImageUrl = file.response.data.url;
				 this.imageUrlId = file.response.data.id;
			},
			beforeAvatarUpload(file) {
				// const isJPG = file.type === 'image/jpeg'
				const isLt2M = file.size / 1024 / 1024 < 2;
				if (!isLt2M) {
					this.$message.error("上传头像图片大小不能超过 2MB!");
				}
				return isLt2M;
			},
			handleRemove(file, fileList) {
				this.fileList = fileList
			},
			uploadChange() {
				let fileList = this.fileList.length;
				let arr = this.fileList;
				if (fileList > 1) {
					arr.splice(1, 1)
					this.fileList = arr;
					this.$message.error("封面图只能上传一张!");
					return;
				}
			},
			// 定金比率
			setDeposit() {
				let fag = /^([1-9][0-9]{0,1}|100)$/;
				if (!fag.test(this.deposit_rate)) {
					this.deposit_rate = 10;
					this.$message.warning("请输入1-100之间");
					return;
				}
			},
			/**
			 * 添加
			 */
			addData() {
				let { area_scope, price } = this.form
				let newArea = area_scope.split('-')
				console.log(newArea[0], newArea[1])
				if (newArea[0] > newArea[1])
				  return this.$message({
				    message: '面积格式有误',
				    type: 'warning',
				  })
				let data = {
				  area_scope: area_scope,
				  price,
				}
				if (!area_scope) return
				if (!price) return
				this.list.push(data)
				console.log(this.list);
				this.form.area_scope = ''
				this.form.price = ''
			},
			// 删除一级商品
			handleProductDel(index, indexX,item,isType) {
				let  goodsList=this.goodsList;
				console.log('goods1----',goodsList)
				let that=this;
				goodsList.forEach(function(items,index){
					if(items.product_id==item.product_id){
						that.$set(that.goodsList[index], "checked", false);
						// if(isType==1){
						// 	that.goodsList.splice(index, 1)
						// }
						//return items.checked=false;
					}
				})
				this.shopList[indexX].list.splice(index, 1)
				if (!this.shopList[indexX].list.length) {
					this.shopList.splice(indexX, 1)
				}
			},
			handleDel(index) {
				this.list.splice(index, 1);
			},
			handlePictureCardPreview2(file) {
				this.dialogImageUrls = file.url
				this.dialogVisibles = true
			},
			handleImageSuccess(res, file) {
				let logoData = file.response.data
				this.dialogImageUrls = logoData.url
				this.bannerList.push({
					url: logoData.url,
					img_id: logoData.id
				})
			},
			beforeImageUpload(file) {
				const isLt2M = file.size / 1024 / 1024 < 2

				if (!isLt2M) {
					this.$message.error('上传头像图片大小不能超过 2MB!')
				}
				return isLt2M
			},
			handleRemove2() {
				let imgIndex = this.bannerList.findIndex(item => item.img_id == file.img_id)
				this.bannerList.splice(imgIndex, 1)
			},
			//选择商品id
			handleProduct(cate_id, cate_name, e, index, items) {
				this.productId = e
				this.productIndex = index
				this.cate_id = cate_id
				this.cate_name = cate_name
			   
				console.log(cate_id, '分类id');
				console.log(e, '商品id');
				console.log(index, '商品下标');
				console.log(this.radio2);
				console.log(this.goodsList,'goodsList');
				let cateArr = this.shopList.findIndex(item => item.cate_id == this.cate_id)
				if (cateArr == -1) {
					this.shopList.push({
						cate_id: this.cate_id,
						isShow: true,
						cate_name: this.cate_name,
						list: []
					})
				}
				var cateArr2 = this.shopList.findIndex(item => item.cate_id == this.cate_id)
				let isOk = this.shopList[cateArr2].list.findIndex(item => item.product_id == this.productId)
				///////
				let obj = {
					...this.goodsList[this.productIndex],
					productSecondList: [],
					selectData: [],
				}
				this.commodityId = obj.product_id
				if (isOk != -1) {
                 this.handleProductDel(isOk,cateArr2,items,0);
				}else{
					this.shopList[cateArr2].list.push(obj)
					let itemData={
						index:index
					}
					this.goodsList.forEach(itemsx=>{
						if(itemsx.product_id==e){
							return itemsx.checked=true;
						}
					})
				}
			},
			handleProductSure() {
				if (this.selectType == 1) { ///////////////////////////////////////////////添加商品
					if (this.shopList.length < 1) {
						this.$message.warning('请选择商品')
						return
					}
					// let cateArr = this.shopList.findIndex(item=>item.cate_id==this.cate_id)
					// if(cateArr==-1){
					//    this.shopList.push({
					//       cate_id:this.cate_id,
					//       isShow: true,
					//       cate_name:this.cate_name,
					//       list:[]
					//   })
					// }
					this.dialogFormVisible3 = false
				} else { /////////////////////////////////////////////////////////////添加可替换商品
					if (this.radio2 === '') {
						this.$message.warning('请选择商品')
						return
					}
					let isOk = this.shopList[this.shopListIndex].list[this.productShowItem].product_id == this.productId
					console.log(isOk);
					if (isOk) {
						this.$message.warning('请勿与原商品重复')
						return
					}

					let isOk2 = this.shopList[this.shopListIndex].list[this.productShowItem].productSecondList.findIndex(
						item => item.product_id == this.productId)
					console.log(isOk2);
					if (isOk2 != -1) {
						this.$message.warning('请勿重复添加替换商品')
						return
					}

					let obj = {
						...this.goodsList[this.productIndex],
						selectData: [],
					}
					this.commodityId = obj.product_id
					this.shopList[this.shopListIndex].list[this.productShowItem].productSecondList.push(obj)
					console.log(this.shopList, '商品数组---------')
					this.dialogFormVisible3 = false
				}
				// this.shopList = JSON.parse(JSON.stringify(this.shopList))
			},
			//获取案例详情
			getProductList() {
			  let params = {
			    id: this.id,
			  }
			  this.$http.post('/api/admin/newpk/ProductPack/detail', params).then((res) => {
			    console.log(res, "详情数据");
			    if (res.code == 1) {
			      this.set_deposit_status = res.data.product_pack.set_deposit_status==1?'1':'0'
			      this.deposit_rate = (res.data.product_pack.deposit_rate*100).toFixed(0)
				  this.promotor_rate=res.data.product_pack.promotor_rate
			      this.productList = res.data.product_pack
			      //this.imageUrl = res.data.product_pack.lead_img
				 // this.dialogImageUrls=res.data.product_pack.lead_img
			      this.imageUrlId = res.data.product_pack.lead_img_id
			      this.list = res.data.product_pack.sku_lst
			      this.sceneList = res.data.product_pack_scene
			      console.log(res.data.product_pack_scene);
			      // this.house_typeList.map(item=>{
			      //   if(item.name==res.data.product_pack_scene.house_name){
			          // this.house_name_id = res.data.product_pack_scene.house_name
			      //   }
			      // })
			      this.house_room = res.data.product_pack_scene.house_room
			      this.house_office = res.data.product_pack_scene.house_office
			      console.log(this.house_name_id);
			      this.diyList = res.data.product_pack_diy_list
			      this.houseTypeList = res.data.product_pack_scene.style_id
			      if (this.productList.is_push == 1) {
			        this.recommend = '1'
			      } else {
			        this.recommend = '0'
			      }
				  //封面图
				  this.fileList.push({
				  	url:res.data.product_pack.lead_img,
				  	img_id: res.data.product_pack.lead_img_id
				  })
				  //轮播图
			      res.data.product_pack_scene.thumb_url.map(item=>{
			        this.bannerList.push({
			          url:item.image_path,
			          img_id:item.image_id
			        })
			      })
			      console.log(this.pitchProductList);
			      this.shopList = []
			      // this.pitchProductList = res.data.product_pack_diy_list
			      
			      res.data.product_pack_diy_list.map(item=>{
			        let obj={
			          cate_id:item.cate_id,
			          cate_name:item.cate_name,
			          isShow:true,
			          list:[]
			        }
			        item.product_list.map(item1=>{ //主商品
			          let obj1 = {
			            id:item1.product_data.id,
			            product_id:item1.product_data.product_id,
			            product_title:item1.product_data.product_title,
			            store_name:item1.product_data.store_name,
			            cate_id:item1.product_data.cate_id,
			            cate_name:item1.product_data.cate_name,
						price:item1.product_data.sku_data[0].price,
						primary_price:item1.product_data.sku_data[0].primary_price,
			            selectData:[],
			            productSecondList:[]
			          }
			          item1.product_data.sku_data.map(item2=>{ //规格
			            let obj2 = {
			              id:item2.id,
			              num:item2.num,
			              checked:item2.checked,
			              sku_id:item2.id,
			              arr:[],
			            }
			            if(item2.attribute){
			              item2.attribute.map(item3=>{
			                let obj3 = {
			                  specif:item3.value,
			                  key:item3.key
			                }
			                obj2.arr.push(obj3)
			              })
			            }
			            obj1.selectData.push(obj2)
			          })
			
			          item1.replace_product.map(item4=>{ //替换商品
			            let obj4 = {
			                product_id:item4.product_id,
			                product_title:item4.product_title,
			                store_name:item4.store_name,
			                cate_name:item4.cate_name,
			                selectData:[]
			            }
			            item4.sku_data.map(item5=>{ //规格
			              let obj5 = {
			                id:item5.id,
			                num:item5.num,
			                checked:item5.checked,
			                sku_id:item5.id,
			                arr:[]
			              }
			              if(item5.attribute){
			                item5.attribute.map(item6=>{
			                  let obj6 = {
			                    specif:item6.value,
			                    key:item6.key
			                  }
			                  obj5.arr.push(obj6)
			                })
			              }
			              obj4.selectData.push(obj5)
			            })
			            obj1.productSecondList.push(obj4)
			          })
			          obj.list.push(obj1)
			        })
			        this.shopList.push(obj)
			      })
			
			      console.log('this.shopList',this.shopList);
			    }
			  })
			},
			save(i) {
				this.activeIndex = i;
				if(i==2){
					if (this.promotor_rate > 15 || this.promotor_rate < 0) {
						this.$message({
							type: "warning",
							message: "分佣比率范围在0-15"
						});
						return;
					}
				}
				this.handleSelect(i);
			}
		}
	}
</script>
<style  lang="less">
	.ql-editor {
	  min-height: 350px;
	  max-height: 380px;
	  font-size: 16px;
	}
	.container {
		.index_top {
			.current {
				padding-left: 20px;
			}
		}

		.title-receiving {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin: 20px;

			.detail {
				color: #409eff;
			}
		}

		.house-detail {
			padding: 20px 0 50px 0;

			.form-area {
				display: flex;
				align-items: center;
				justify-content: flex-start;

				.area-select {
					margin-right: 50px;
				}

				.estate-select {
					margin-right: 50px;
				}

				.estate {
					// border: 1px solid #dcdfe6;
					display: flex;
					height: 40px;
					font-size: 16px;
					line-height: 40px;
					margin-top: -22px;

					// width: 500px;
					.inline-input {
						width: 300px;
						height: 40px;
					}

					.estate-input {
						width: 100px;

					}
				}

				.el-button {
					margin-top: -22px;
				}
			}

			.house-type {

				.house-title {
					margin-bottom: 30px;
				}

				.house-img {
					width: 1500px;
					display: flex;
					align-items: center;
					flex-wrap: wrap;

					.image {
						width: 228px;
						height: 228px;
					}

					.img-item {
						margin-right: 10px;
					}
				}
			}
		}

		.case-article {
			padding: 20px 0 50px 0;

			.case-title {
				width: 50%;
			}
		}

		.editor .ql-editor {
			min-height: 300px;
			max-height: 300px;
			font-size: 14px;
		}

		.associated-goods {
			margin-top: 30px;
			border-bottom: 1px solid #e0e0e0;
			padding-bottom: 40px;
			margin-bottom: 30px;

			.seach {
				width: 50%;
				margin-bottom: 20px;
				display: flex;

				button {
					width: 100px;
					background: #409dfb;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-left: 15px;
					border: 0 none;
					outline: none;
					border-radius: 4px;
					color: #fff;

					i {
						margin-right: 5px;
					}
				}
			}

			.goodsBox {
				width: 50%;
				max-height: 400px;
				overflow-y: auto;
			}

			.goods {
				.title {
					color: #000;
				}

				.good-img {
					display: flex;

					// align-items: center;
					.img-item {
						position: relative;
						margin-right: 10px;
					}

					.image {
						width: 130px;
						height: 130px;
					}

					.img-title {
						position: absolute;
						width: 130px;
						left: 0;
						bottom: 0;
						padding: 5px;
						color: #fff;
						background: rgba(0, 0, 0, 0.5);
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					i {
						position: absolute;
						top: 0;
						right: 0;
						font-size: 20px;
					}
				}
			}
		}

		.title {
			color: #000;
			margin-top: 20px;
		}

		// 3D全屋漫游
		.case_3D {
			margin-top: 30px;
			border-bottom: 1px solid #e0e0e0;
			padding-bottom: 40px;
			margin-bottom: 30px;

			.seach {
				width: 50%;
				margin-bottom: 10px;
				display: flex;

				button {
					width: 100px;
					background: #409dfb;
					display: flex;
					justify-content: center;
					align-items: center;
					margin-left: 15px;
					border: 0 none;
					outline: none;
					border-radius: 4px;
					color: #fff;

					i {
						margin-right: 5px;
					}
				}
			}

			// 搜索方案列表
			.seachList {
				width: 50%;
				max-height: 400px;
				overflow-y: auto;
				margin-bottom: 30px;

				// padding-right: 105px;
				.seachItem {
					line-height: 40px;
					padding: 0 18px;
					display: flex;
					justify-content: space-between;
					width: 100%;
					border: 1px solid #e0e0e0;
					width: 100%;
					height: 40px;

					.text3D {
						width: 200px;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
					}

					.selectBtn {
						cursor: pointer;
					}
				}
			}

			// 已关联列表
			.rela_3d {
				display: flex;

				.list {
					margin-left: 20px;

					.text {
						width: 130px;
						overflow: hidden;
						white-space: nowrap;
						text-overflow: ellipsis;
						margin-bottom: 10px;
					}

					img {
						width: 130px;
						height: 130px;
					}
				}
			}
		}

		.comment {
			.title {
				color: #000;
			}

			.comment-content {
				padding: 0 50px 50px 50px;

				.content {
					width: 75%;
					padding: 20px;
					border-bottom: 1px solid #e0e0e0;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.content-left {
						display: flex;
						align-items: center;

						.comment-image {
							width: 50px;
							height: 50px;
							border-radius: 50%;
							margin-right: 10px;
						}

						.comment-center {
							.item-content {
								width: 350px;
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
							}
						}
					}

					.comment-right {
						.comment-btn {
							display: flex;
							justify-content: space-around;
							align-items: center;
							margin-top: 10px;

							button {
								padding: 0px 8px;
								border: 1px solid #e0e0e0;
								background: #fff;
							}
						}
					}
				}
			}
		}

		.primary-btn {
			width:100%;
			margin:30px auto;
			.el-buttons{
				width: 100px;
				margin: auto;
				text-align: center;
			}
		}

		//图片上传样式
		.avatar-input {
			// margin-right: 100px;
			display: flex;
			align-items: center;

			.avatar-uploader-icon {
				font-size: 28px;
				color: #8c939d;
				width: 178px;
				height: 178px;
				line-height: 178px;
				text-align: center;
			}

			.avatar {
				width: 178px;
				height: 178px;
				display: block;
				border: 1px dashed #d9d9d9;
				border-radius: 6px;
				cursor: pointer;
				position: relative;
				overflow: hidden;
			}

			.tag {
				width: 750px;
			}

			.price {
				margin-left: 20px;
			}

			.el-icon-error {
				font-size: 20px;
				margin-left: 5px;
			}

			.money {
				margin-left: 10px;
			}

			.cover {
				width: 250px;
				height: 150px;
			}

			.add-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border: 1px solid #c0c4cc;
				padding: 0 5px;
				margin-right: 10px;
				margin-bottom: 10px;
				width: 200px;

				i {
					cursor: pointer;
				}
			}
		}

		//全选
		.sale_bottom_page_left_checkAll {
			width: 61px;
			height: 61px;
			display: flex;
			justify-content: space-around;
			align-items: center;
			margin-right: 10px;

			.checkbox {
				display: inline-block;
				width: 18px;
				height: 18px;
				text-align: center;
				line-height: 18px;
				font-size: 14px;
				border: 1px solid #e3e3e3;
				color: #fff;
				cursor: pointer;
			}

			.check_active {
				background: #409DFB 10000%;
			}
		}

		.newShop_tabs_content_btn {
			width: 100%;
			height: 60px;
			display: flex;
			justify-content: center;
			align-items: center;
			border-top: 1px solid rgba(#101010, 0.4);
			margin-top: 10px;

			button {
				width: 70px;
				height: 30px;
				border: 0 none;
				outline: none;
				font-size: 14px;
				cursor: pointer;
			}

			.save {
				color: #fff;
				background: #25A9F8;
			}
		}

		.house-detail {
			.form-tel {
				display: flex;

				.area-input {
					width: 100%;
					display: flex;
					align-items: center;

					.area-span {
						margin: 0 4px 0 4px;
					}
				}

				.add-btn {
					width: 80px;
					height: 40px;
					padding: 5px 0;
					margin-left: 26px;
				}

				.tel-input {
					margin-left: 20px;
					display: flex;
					align-items: center;

					.el-icon-error {
						font-size: 20px;
						margin-left: 5px;
					}

					.tag {
						width: 750px;
					}

					.price {
						margin-left: 20px;
					}

					.el-icon-error {
						font-size: 20px;
						margin-left: 5px;
					}

					.money {
						margin-left: 10px;
					}

					.cover {
						width: 250px;
						height: 150px;
					}

					.add-item {
						display: flex;
						justify-content: space-between;
						align-items: center;
						border: 1px solid #c0c4cc;
						padding: 0 5px;
						margin-right: 10px;
						margin-bottom: 10px;
						width: 200px;

						i {
							cursor: pointer;
						}
					}
				}

				.service {
					display: flex;
					align-items: center;
					margin-left: 100px;

					.money {
						margin-left: 10px;
					}
				}
			}

			.item-input {
				display: flex;

				.shelves {
					width: 100%;
					display: flex;
				}
			}
		}

		.seach {
			width: 50%;
			margin: 20px 0;
			display: flex;

			.button {
				width: 100px !important;
				background: #409dfb;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-left: 15px;
				border: 0 none;
				outline: none;
				border-radius: 4px;
				color: #fff;

				i {
					margin-right: 5px;
				}
			}
		}

		.logo-img {
			width: 40px;
			height: 40px;
		}

		.content {
			width: 500px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.border-bt {
			padding-bottom: 30px;
			border-bottom: 1px solid #ccc;
			// width: 70%;
			max-height: 600px;
			overflow-y: auto;

			p {
				color: #409EFF;
				width: 70%;
				padding-top: 20px;
				text-align: center;
				cursor: pointer;
			}
			.goods-list {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				border: 1px solid #e0e0e0;
				padding: 5px;
				cursor: pointer; 
			   input{
				  display: inline-block;
				  width: 16px;
				  height: 16px;
				  text-align: center;
				  line-height: 18px;
				  font-size: 14px;
				  border: 1px solid #e3e3e3;
				  color: #fff;
			   }
				.checkbox {
					display: inline-block;
					width: 18px;
					height: 18px;
					text-align: center;
					line-height: 18px;
					font-size: 14px;
					border: 1px solid #e3e3e3;
					color: #fff;
					cursor: pointer;
				}
			
				.check_active {
					background: #409DFB 10000%;
				}
			
				.selectBtn {
					cursor: pointer;
				}
			}
		}

		.down-menu {
			margin-top: 20px;
			padding: 20px;
			border: 1px solid #ccc;
			background: #f8f9f8;
			width: 60%;

			i {
				cursor: pointer;
			}

			h6 {
				cursor: pointer;
				margin-bottom: 10px;
			}

			.menu-type {
				display: flex;
				// justify-content: space-between;
				align-items: center;
				// width: 41%;
				margin-bottom: 10px;

				.df-specification {
					margin-left: 5px;
				}

				.specification {
					padding: 2px 4px;
					background: #f4f5f4;
					margin-left: 10px;

					.el-icon-error {
						margin-left: 5px;
					}
				}
			}

			// .default {
			//   width: 23%;
			// }
			.menu-bg {
				background: #fff;
				padding: 20px;

				.menu-content {
					display: flex;
					justify-content: space-between;
					align-items: center;
					margin-bottom: 10px;

					.el-button {
						padding: 3px 8px;
						margin-right: 5px;
						// height: 20px;
					}
				}

				p {
					margin-bottom: 10px;
				}

				.menu-line {
					border-bottom: 1px solid #e1e1e1;
				}
			}
		}
		.product-specification{
		.mt {
		  margin-top: 20px;
		  margin-bottom: 20px;
		}
		
		.minus {
		  padding: 5px 10px;
		  background: #f7f8f7;
		  cursor: pointer;
		}
		.add {
		  padding: 5px 10px;
		  background: #f7f8f7;
		  cursor: pointer;
		}
		.num {
		  // padding: 2px 10px;
		  background: #f7f8f7;
		  margin: 0 5px;
		  width: 40px;
		  height: 30px;
		  text-align: center;
		}
		.default-specification{
			cursor: pointer;
		}
		 }
		 .active {
		   border: 1px solid #66b1ff;
		   color: #66b1ff;
		 }
	}
</style>
